﻿@{
    ViewBag.Title = "JQueryEach";
}
<h2>
    JQueryEach</h2>

@* das HTML Template kann man einfach zwischen zwei Script Tags schreiben - eine Alternative ist hier z.B. http://handlebarsjs.com/ *@
<script id="blogtemplate" type="tuts/template">
    <h2> {{title}} </h2>
    <img src={{thumbNail}} alt={{title}}>
</script>

<section id="main2">

</section>

<script>
    (function () {
        var content = [{
            title: 'My awesome Blogpost',
            thumbNail: 'http://www.trans4mation.de/themes/default_de/img/index/dellaktionen.jpg'
        },
            {
                title: 'My awesome Blogpost 2',
                thumbNail: 'http://www.trans4mation.de/themes/default_de/img/index/jobs.jpg'
            }],

            template = $.trim($('#blogtemplate').html());

        newHtml = '';

        $.each(content, function (index, value) {
            //Replace mit Regular Expression
            newHtml += template.replace(/{{title}}/ig, value.title)
                .replace(/{{thumbNail}}/ig, value.thumbNail);
        });

        $('#main2').append(newHtml);

    })();

</script>


